<template>
	<view class="content">
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow">
				<view class="content"><text class="text-grey">头像</text></view>
				<image :src="avatar || '../../../static/image/bg_img.png'" @tap="uploadTap"></image>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow" @click="navto('/pages/setNickname/setNickname?nickname='+nickname)">
				<view class="content"><text class="text-grey">昵称</text></view>
				<view class="item-right">{{ nickname }}</view>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow">
				<view class="content"><text class="text-grey">ID号</text></view>
				<view>{{idnum}}</view>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow" @click="navto('/pages/myCode/myCode')">
				<view class="content"><text class="text-grey">我的二维码</text></view>
				<view class="cuIcon-qr_code"></view>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow">
				<view class="content">
					<text class=""></text>
					<text class="text-grey">性别</text>
				</view>
				<view>
					<picker @change="bindsexChange" :value="sexindex" :range="sexarray">
						<view class="uni-input">{{ sexarray[sexindex] }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow">
				<view class="content" @click="navto('/pages/setAge/setAge?age='+age)">
					<text class=""></text>
					<text class="text-grey">年龄</text>
				</view>
				<view>{{ age }}</view>
			</view>
		</view>
		<view class="cu-list menu card-menu shadow-lg">
			<view class="cu-item arrow">
				<view class="content"><text class="text-grey">地区</text></view>
				<view @click="showModal" data-target="bottomModal">{{address || '请选择'}}</view>
				<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
					<view class="cu-dialog">
						<view class="cu-bar bg-white">
							<view class="action text-green">请选择收货地址</view>
							<view class="action text-blue" @tap="hideModal">取消</view>
						</view>
						<view><areaSelect @confirm="onCityClick" platform="jd"></areaSelect></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="cu-list menu card-menu shadow-lg" :class="modalName == 'bottomModal'?'yin':''">
			<view class="cu-item arrow">
				<view class="content" @click="navto('/pages/address/address')"><text class="text-grey">我的地址</text></view>
			</view>
		</view> -->
	</view>
</template>

<script>
import areaSelect from '@/components/semp-city/semp-city';
export default {
	components: {
		areaSelect
	},
	data() {
		return {
			avatar: '',
			nickname: '呀哈哈',
			sex: '',
			idnum: '',
			age: '',
			sexindex: 0,
			modalName: null,
			address: '',
			sexarray: ['女','男']
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.$msgchat.initwork();
		this.initdata()
	},
	onBackPress(){
		uni.switchTab({
			url: '/pages/personCenter/personCenter'
		})
	},
	methods: {
		initdata(){
			var obj = {
				token: uni.getStorageSync('token')
			}
			this.$common.requests('/api/Group/checkmyvip', obj).then(res => {
				// console.log(res)
				if(res.data.code==1){
					var usermsg = res.data.data;
					if(usermsg.avatar){
						this.avatar = this.$common.baseUrl + usermsg.avatar;
					}
					this.nickname = usermsg.nickname;
					this.sexindex = usermsg.gender;
					this.idnum = usermsg.idnum;
					this.age = usermsg.age?usermsg.age:'';
					this.address = usermsg.address;
				}else{
					this.$api.msg(res.data.msg);
					return;
				}
				
			})
		},
		editavatar(avatar){
			var obj = {
				token: uni.getStorageSync('token'),
				avatar:avatar
			}
			this.$common.requests('/api/User/profile', obj).then(res => {
				// console.log(res)
				if(res.data.code==1){
					this.$api.msg(res.data.msg);
					return;
				}else{
					this.$api.msg(res.data.msg);
					return;
				}
				
			})
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
		},
		onCityClick(e) {
			// this.provinceName = e.province.label;
			// this.cityName = e.city.label;
			// this.countyName = e.county.label;
			// this.townName = e.town.label;
			this.address = e.province.label + '-' + e.city.label + '-' + e.county.label + '-' + e.town.label;
			this.hideModal();
			this.$common.requests('/api/user/updateaddress', {address: this.address}).then(res =>{
				if(res.data.code == 1){
					this.$api.msg('修改成功');
				}
			})
		},
		navto(url) {
			uni.navigateTo({
				url: url
			});
		},
		//修改性别
		bindsexChange(e) {
			this.sexindex = e.target.value;
			var obj = {
				token: uni.getStorageSync('token'),
				gender:this.sexindex
			}
			this.$common.requests('/api/User/updatesex', obj).then(res => {
				// console.log(res)
				if(res.data.code==1){
					this.$api.msg(res.data.msg);
					return;
				}else{
					this.$api.msg(res.data.msg);
					return;
				}
				
			})
		},
		uploadTap() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// sourceType: ['album'],
				success: chooseImageRes => {
					that.tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.$common.baseUrl + '/api/common/upload', //上传接口地址
						filePath: that.tempFilePaths[0],
						name: 'file',
						enctype: 'multipart/form-data',
						formData: {
							mobile: that.phone
						},
						success: uploadFileRes => {
							let res = JSON.parse(uploadFileRes.data);
							// that.avatar = configs.baseUrl + res.data.url.substr(1);
							that.avatar = this.$common.baseUrl + res.data.url;
							let obj = uni.getStorageSync('userinfo');
							obj.avatar = res.data.url;
							uni.setStorageSync('userinfo', obj);
							uni.setStorageSync('avatar', that.avatar);
							that.editavatar(res.data.url);
							// that.alipayimg = that.baseurl + "/service" + res.data.alipayimg
							// this.$http.post('updateavatar',{avatar: res.data.url}).then(res => {
							// 	this.$api.msg(res.msg);
							// })
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $uni-color-bei;
}
.content {
	height: 100%;
}
.cu-item {
	image {
		width: 90upx;
		height: 90upx;
	}
}
.yin{
	display: none;
}
.item-right {
	color: $uni-text-color-grey;
}
.cu-list {
	background: #fff;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-radius: 0 !important;
	margin-top: 0 !important;
	border-top: 1px solid $uni-color-bei;
	/* width: 100%; */
}

.cu-modal{
	height: 690upx;
}
.cu-list:nth-child(5) {
	margin-top: 20upx !important;
}
.cu-list:nth-child(7) {
	overflow: inherit!important;
}
.cu-list:nth-child(8) {
	margin-top: 20upx !important;
}
.text-grey {
	color: $uni-text-color;
}
</style>
